<!-- 快运寄件管理 -->
<template>
<div id="pdfBox" class="content-box">
  <FilterBox
    :labelWidth="120"
    :filterItemList="filterItemList"
    :filterData="filterData"
    @search="search"
    @clear="clear"
    @keep="keepHeaderList"
  >
  </FilterBox>
  <div class="tabsBox">
    <div @click="leftSlide" class="left-btn border-right">
        <i class="el-icon-d-arrow-left"></i>
    </div>
    <div class="scroll_wrapper" ref="wrapperCon">
      <div class="tabslist">
        <div
          :class="filterData.trans_status === item.id ? 'tabsItem tabs-active' : 'tabsItem'"
          style="padding-right:5px"
          v-for="(item, index) in tabsList"
          :key="index"
          @click="changeTab(item)"
        >
          {{ item.name }}
          <span v-if="item.id!==''&&item.id!==6">（{{item.count}}）</span>
        </div>
      </div>
    </div>
    <div @click="rightSlide" class="right-btn border-left">
        <i class="el-icon-d-arrow-right"></i>
    </div>
  </div>
  <MyTable
    :tableColumn="tableColumn"
    :tableData="tableData"
    :isOrder="false"
    @sendCurrentData="setCurrent"
    @cellDblclick="cellDblclick"
    >
    <template v-slot:content="scope">
      <span class="moreContant" v-if="!!scope.config.MoreContant">
        <span v-for="(item,k) in scope.config.MoreContant" :key="k">
          <span v-if="!item.istooltip">{{item.label}}:{{scope.row[item.prop]}}</span>
          <span v-else>
            {{item.label}}:
            <el-tooltip class="tooltip" :content="scope.row[item.prop]" placement="bottom-start" effect="dark">
                <span>{{scope.row[item.prop]}}</span>
            </el-tooltip>
            </span>
        </span>
      </span>
      <span class="moreContant" v-else-if="!!scope.config.is_additional">
        <span v-for="(item,k) in scope.row.items" :key="k">
          {{item.name_current}}:{{item.val}}
        </span>
      </span>
      <span v-else>{{ scope.row[scope.config.prop] }}</span>
    </template>
  </MyTable>
  <!-- 分页组件 -->

  <Pagination
    :menuTabsId="filterData.trans_status"
    ref="pagination"
    :currentPage="pageinfo.page"
    :pageSize="pageinfo.limit"
    :total="pageinfo.number_all"
    :page_all="pageinfo.page_all"
    @pagination="SetPagination"
    @sendPushButton="pushButton"
  >
  </Pagination>

  <Add
    @success="getTableData"
    ref="add"
  ></Add>
  <Edit
    @success="getTableData"
    ref="edit"
  ></Edit>
  <Details
    ref="details"
  ></Details>
  <WaybillDetails
    @success="getTableData"
    ref="waybillDetails"
  ></WaybillDetails>
  <SignStorage
    @success="getTableData"
    ref="SignStorage"
  ></SignStorage>
  <Generate
    @success="getTableData"
    ref="Generate"
  ></Generate>
  <SetStatus
    @success="getTableData"
    ref="SetStatus"
  ></SetStatus>
  <TrajectoryQuery
    @success="getTableData"
    ref="TrajectoryQuery"
  ></TrajectoryQuery>
  <TrajectoryAdd
    @success="getTableData"
    ref="TrajectoryAdd"
  ></TrajectoryAdd>
</div>
</template>
<script>
import Add from "./ExpressDeliveryManagement_add";
import Edit from "./ExpressDeliveryManagement_edit";
import Details from "./ExpressDeliveryManagement_details";
import WaybillDetails from "./ExpressDeliveryManagement_WaybillDetails";
import SignStorage from "./ExpressDeliveryManagement_signStorage";
import Generate from "./ExpressDeliveryManagement_Generate";
import SetStatus from "./ExpressDeliveryManagement_setStatus";
import TrajectoryQuery from "./ExpressDeliveryManagement_trajectoryQuery";
import TrajectoryAdd from "./ExpressDeliveryManagement_trajectoryAdd";

export default {
  components: {
    Add,
    Edit,
    Details,
    WaybillDetails,
    SignStorage,
    Generate,
    SetStatus,
    TrajectoryQuery,
    TrajectoryAdd,
  },
  data(){
    return{
      tabsList:[
        {id:0,name:this.$t('ExpressDeliveryManagementLang.Pending_storage'),count:0},
        {id:2,name:this.$t('ExpressDeliveryManagementLang.To_packaged'),count:0},
        {id:3,name:this.$t('ExpressDeliveryManagementLang.To_released_from_warehouse'),count:0},
        {id:4,name:this.$t('ExpressDeliveryManagementLang.During_transportation'),count:0},
        {id:6,name:this.$t('ExpressDeliveryManagementLang.Delivered'),count:0},
        {id:'',name:this.$t('ExpressDeliveryManagementLang.whole'),count:0},
      ],
      filterItemList:[
        // input输入框
        { label:this.$t('ExpressOrderManagementLang.order_number'),width:200, filterKey: 'order_sn', filterType: 'SearchInput', placeholderStr: null },
        // 日期选择器
        { label:this.$t('ExpressOrderManagementLang.Order_Date'),width:200, filterKey: 'order_date', filterType: 'SearchDate' },
        // 下拉框
        { label:this.$t('ExpressOrderManagementLang.line'),width:200, filterKey: 'lid', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:[],label:'name_current',value:'lid'} },
        // 下拉框
        { label:this.$t('ExpressOrderManagementLang.sale'),width:200, filterKey: 'order_sale_uid', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:[],label:'name',value:'uid'} },
        // 下拉框
        // { label:this.$t('ExpressOrderManagementLang.Order_billing_status'),width:200, filterKey: 'out_bill_status', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:[],label:'name',value:'id'} },
        // 下拉框
        { label:this.$t('ExpressOrderManagementLang.Order_payment_status'),width:200, filterKey: 'pay_status', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:[],label:'name',value:'id'} },
        // 下拉框
        { label:this.$t('ExpressOrderManagementLang.Origin'),width:200, filterKey: 'start_local', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:[],label:'name_current',value:'id'} },
        // 下拉框
        { label:this.$t('ExpressOrderManagementLang.destination'),width:200, filterKey: 'target_local', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:[],label:'name_current',value:'id'} },
      ],
      filterData:{
        page: "",
        limit: "30",
        order: "",

        type:1,
        
        keyword: "",
        order_sn: "",
        order_date:[],
        order_date1: "",
        order_date2: "",
        lid: "",
        order_sale_uid: "",
        out_bill_status: "",
        pay_status: "",
        start_local: "",
        target_local: "",
        trans_status:0,
      },
      lineoptions:[],
      saleoptions:[],
      shippingoptions:[],
      billingoptions:[],
      paymentoptions:[],
      localoptionsStr:[],
      localoptionsEnd:[],

      tableColumn: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Order_information'),
          prop: "Order_information_value",
          width: 250,
          MoreContant:[
            {
              label: this.$t('ExpressOrderManagementLang.Order_time'),
              prop: "create_order_time",
            },
            {
              label: this.$t('ExpressOrderManagementLang.order_number'),
              prop: "order_sn",
            },
            {
              label: this.$t('ExpressDeliveryManagementLang.Ticket_number'),
              prop: "ticket_num",
            },
            {
              label: this.$t('ExpressOrderManagementLang.Order_remarks'),
              prop: "remark",
              istooltip:true,
            },
          ]
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Order_status'),
          prop: "Order_status_value",
          width: 140,
          MoreContant:[
            {
              label: this.$t('ExpressOrderManagementLang.Transportation_status'),
              prop: "trans_status_name",
            },
            {
              label: this.$t('ExpressOrderManagementLang.Out_bill_status'),
              prop: "out_bill_status_name",
            },
            {
              label: this.$t('ExpressOrderManagementLang.Payment_status'),
              prop: "pay_status_name",
            },
          ]
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Shipper_information'),
          prop: "Shipper_information_value",
          width: 140,
          MoreContant:[
            {
              label: this.$t('ExpressOrderManagementLang.Shipper'),
              prop: "order_uid_name",
            },
            {
              label: this.$t('ExpressOrderManagementLang.sale'),
              prop: "order_sale_uid_name",
            },
            {
              label: this.$t('ExpressOrderManagementLang.discount'),
              prop: "discount",
            },
            // {
            //   label: this.$t('ExpressOrderManagementLang.VIP_level'),
            //   prop: "VIP_level_value",
            // },
          ]
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Route_information'),
          prop: "Route_information_value",
          width: 140,
          MoreContant:[
            {
              label: this.$t('ExpressOrderManagementLang.Line_name'),
              prop: "line_name",
            },
            {
              label: this.$t('ExpressOrderManagementLang.Origin'),
              prop: "start_local_name",
            },
            {
              label: this.$t('ExpressOrderManagementLang.destination'),
              prop: "target_local_name",
            },
          ]
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.pickup_information'),
          prop: "Receipt_information_value",
          width: 200,
          MoreContant:[
            {
              label: this.$t('ExpressOrderManagementLang.take_goods_method'),
              prop: "dispatch_type_name",
            },
            {
              label: this.$t('ExpressOrderManagementLang.name_sender'),
              prop: "pickup_name",
            },
            {
              label: this.$t('ExpressOrderManagementLang.Sender_phone_number'),
              prop: "pickup_tel",
            },
            {
              label: this.$t('ExpressOrderManagementLang.return_address'),
              prop: "pickup_addr",
            },
          ]
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Weighing_information'),
          prop: "Weighing_information_value",
          width: 140,
          MoreContant:[
            {
              label: this.$t('ExpressOrderManagementLang.Gross_weight_goods'),
              prop: "gross_weight",
            },
            {
              label: this.$t('ExpressOrderManagementLang.Cargo_weighing'),
              prop: "weight",
            },
            {
              label: this.$t('ExpressOrderManagementLang.Volume_goods'),
              prop: "volume",
            },
            {
              label: this.$t('ExpressOrderManagementLang.Cargo_volumeing'),
              prop: "cal_volume",
            },
          ]
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.Goods_information'),
          prop: "Goods_information_value",
          width: 250,
          MoreContant:[
            {
              label: this.$t('ExpressDeliveryManagementLang.Number_packages'),
              prop: "package_num",
            },
            {
              label: this.$t('ExpressDeliveryManagementLang.number'),
              prop: "quantity_num",
            },
            {
              label: this.$t('ExpressDeliveryManagementLang.Type_goods'),
              prop: "cargo_type_name",
            },
            {
              label: this.$t('ExpressDeliveryManagementLang.Product_Name'),
              prop: "goods_names",
              istooltip:true,
            },
          ]
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.additional_information'),
          prop: "additional_information_value",
          width: 140,
          is_additional:true,//是否为自增信息列
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Order_cost'),
          prop: "Order_cost_value",
          width: 140,
          MoreContant:[
            {
              label: this.$t('ExpressOrderManagementLang.freight'),
              prop: "bill_trans_price",
            },
            {
              label: this.$t('ExpressOrderManagementLang.service_charge'),
              prop: "bill_survey_price",
            },
            {
              label: this.$t('ExpressOrderManagementLang.insurance_premium'),
              prop: "bill_insure_price",
            },
            {
              label: this.$t('ExpressOrderManagementLang.Total_cost'),
              prop: "total_price",
            },
          ]
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.time'),
          prop: "time_value",
          width: 220,
          MoreContant:[
            {
              label: this.$t('ExpressOrderManagementLang.Order_time'),
              prop: "create_order_time",
            },
            {
              label: this.$t('ExpressOrderManagementLang.Transportation_time'),
              prop: "trans_time",
            },
            {
              label: this.$t('ExpressOrderManagementLang.Delivery_time'),
              prop: "arrival_time",
            },
            {
              label: this.$t('ExpressOrderManagementLang.Payment_Time'),
              prop: "pay_time",
            },
          ]
        },
      ],
      tableData: [],

      pageinfo: {
        page: 1,
        page_all: 1,
        limit: 30,
        number_all: 0,
      },
      sendDataArr:[],//多选框勾选集合
    }
  },
  computed: {
      tabsId() {
          return this.$store.state.tabsId;
      }
  },
  mounted(){
    this.getTabsList()
    this.getHeaderList()
    this.getTableData()
    this.getOptionsList()
  },
  methods:{
    getTabsList(){
      this.$get("selfCompanyGetShippingOrderTransStatus", this.filterData).then((res) => {
        this.tabsList = res.data
      });
    },
    // 获取下拉单列表
    async getOptionsList() {
      await this.$get("screenLines",{type:2}).then((res) => {
        this.lineoptions = res.data;
      });
      await this.$get("allChilds").then((res) => {
        this.saleoptions = res.data;
      });
      await this.$get("billSysItems").then((res) => {
        this.shippingoptions = res.data.trans_status;
        this.billingoptions = res.data.bill_status;
        this.paymentoptions = res.data.order_pay_type;
      });
      await this.$get("visibleAddress").then((res) => {
        this.localoptionsStr = res.data.start_local;
        this.localoptionsEnd = res.data.all_target_local;
      });

      this.filterItemList=[
        // input输入框
        { label:this.$t('ExpressOrderManagementLang.order_number'),width:200, filterKey: 'order_sn', filterType: 'SearchInput', placeholderStr: null },
        // 日期选择器
        { label:this.$t('ExpressOrderManagementLang.Order_Date'),width:200, filterKey: 'order_date', filterType: 'SearchDate' },
        // 下拉框
        { label:this.$t('ExpressOrderManagementLang.line'),width:200, filterKey: 'lid', filterType: 'SearchFilterSelect', placeholderStr: null, filterOptions: {options:this.lineoptions,label:'name_current',value:'lid'} },
        // 下拉框
        { label:this.$t('ExpressOrderManagementLang.sale'),width:200, filterKey: 'order_sale_uid', filterType: 'SearchFilterSelect', placeholderStr: null, filterOptions: {options:this.saleoptions,label:'name',value:'uid'} },
        // 下拉框
        // { label:this.$t('ExpressOrderManagementLang.Order_billing_status'),width:200, filterKey: 'out_bill_status', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:this.billingoptions,label:'name',value:'id'} },
        // 下拉框
        { label:this.$t('ExpressOrderManagementLang.Order_payment_status'),width:200, filterKey: 'pay_status', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:this.paymentoptions,label:'name',value:'id'} },
         // 下拉框
        { label:this.$t('ExpressOrderManagementLang.Origin'),width:200, filterKey: 'start_local', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:this.localoptionsStr,label:'name_current',value:'id'} },
        // 下拉框
        { label:this.$t('ExpressOrderManagementLang.destination'),width:200, filterKey: 'target_local', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:this.localoptionsEnd,label:'name_current',value:'id'} },
      ]
    },
    //查询
    search(){
      this.getTableData()
    },
    //清空
    clear(){
      this.getTabsList()
      this.filterData.keyword= "",
      this.filterData.order_sn= "",
      this.filterData.order_date=[],
      this.filterData.order_date1= "",
      this.filterData.order_date2= "",
      this.filterData.lid= "",
      this.filterData.order_sale_uid= "",
      this.filterData.out_bill_status= "",
      this.filterData.pay_status= "",
      this.filterData.start_local= "",
      this.filterData.target_local= "",
      this.getTableData()
    },
    // 获取表头组
    getHeaderList(){
      this.$get("get_th",{menu_id:this.tabsId}).then((res) => {
        if(!!res.data.th_json){
          this.tableColumn=JSON.parse(res.data.th_json)
        }
      });
    },
    //保存表头表头组
    keepHeaderList(){
        let params = new FormData();
        params.append("menu_id", this.tabsId);
        params.append("th_json", JSON.stringify(this.tableColumn));
        this.$postForm("save_th", params).then((res) => {
          
        });
    },
    // 更改分页
    SetPagination(data){
      this.filterData.page=data.page
      this.filterData.limit=data.limit
      this.pageinfo.page=data.page
      this.pageinfo.limit=data.limit
      this.getTableData()
    },
    pushButton(route) {
      // 创建预报单：add
      // 查看订单：look
      // 删除预报单：del
      // 签收入库：sign
      // 生成运单：   Generate
      // 出库：   Outbound
      // 轨迹添加：   TrajectoryAdd
      // 轨迹查询：   TrajectoryQuery
      // 轨迹删除：   TrajectoryDel
      // 到货：   transfer
      // 提货：   takeDelivery
      if (route == "add") {
        this.$refs.add.init();
      } else if (route == "edit") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
         this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.edit.init(this.sendDataObj);
        }
      } else if (route == "look") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
         this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.details.init(this.sendDataObj,this.filterData.trans_status!==0&&this.filterData.trans_status!==2);
        }
      } else if (route == "del") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          let params = new FormData();
            params.append("order_sn", this.sendDataObj.order_sn);
          this.$postForm("delShippingOrder", params).then((res) => {
            if(res.success){
              this.$message.success(res.msg);
              this.getTableData();
            }
          });
        }
      } else if (route == "sign") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.SignStorage.init(this.sendDataObj)
        }
      } else if (route == "Generate") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.Generate.init(this.sendDataObj)
        }
      } else if (route == "TrajectoryQuery") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.TrajectoryQuery.init(this.sendDataObj)
        }
      } else if (route == "TrajectoryAdd") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.TrajectoryAdd.init(this.sendDataObj)
        }
      } else if (route == "TrajectoryDel") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.TrajectoryQuery.init(this.sendDataObj,'删除')
        }
      } else if (route == "transfer") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.SetStatus.init(this.sendDataObj,'到货')
        }
      } else if (route == "takeDelivery") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.SetStatus.init(this.sendDataObj,'提货')
        }
      } else if (route == "export") {
        if(this.tableData.length===0){
          this.$message.warning(this.$t('common.noData'));
          return
        }
        this.$downloadCenterLoad('selfCompanyExportShippingOrder',this.filterData);
      }
    },
    // 获取表格数据
    getTableData(){
      this.$get("selfCompanyShippingOrderlist", this.filterData).then((res) => {
        this.tableData = res.data;
        this.pageinfo = res.pageinfo;
        this.pageinfo.limit=Number(this.pageinfo.limit)
        this.sendDataObj={}
        this.$nextTick(()=>{
          let doms=document.getElementsByClassName('isRemarks')
          if(doms.length>0){
            for(var i=0;i<doms.length;i++){
              doms[i].parentElement.style.whiteSpace='unset'
            }
          }
        })
      });
    },
    setCurrent(data){
      this.sendDataObj=data
    },
    cellDblclick(obj){
      let row=obj.row
      this.$refs.details.init(row,this.filterData.trans_status!==0&&this.filterData.trans_status!==2);
    },
    // 左箭头
    leftSlide() {
        // 保存滚动盒子左侧已滚动的距离
        let left = this.$refs.wrapperCon.scrollLeft;
        let num = 0;
        clearInterval(this.timer);
        this.timer = null;
        this.timer = setInterval(() => {
            //   !left:已经滚动到最左侧
            //   一次性滚动距离（可调节）
            if (!left || num >= 300) {
                // 停止滚动
                clearInterval(this.timer);
                this.timer = null;
                return;
            }
            // 给滚动盒子元素赋值向左滚动距离
            this.$refs.wrapperCon.scrollLeft = left -= 30;
            // 保存向左滚动距离（方便判断一次性滚动多少距离）
            num += 30;
        }, 20);
        // 20：速度（可调节）
    },
    // 右箭头
    rightSlide() {
        // 保存滚动盒子左侧已滚动的距离
        let left = this.$refs.wrapperCon.scrollLeft;
        // 保存元素的整体宽度
        let scrollWidth = this.$refs.wrapperCon.scrollWidth;
        // 保存元素的可见宽度
        let clientWidth = this.$refs.wrapperCon.clientWidth;
        let num = 0;
        clearInterval(this.timer);
        this.timer = setInterval(() => {
            // 已经滚动距离+可见宽度
            // left+clientWidth>=scrollWidth：滚动到最右侧
            // num>=300一次性滚动距离
            if (left + clientWidth >= scrollWidth || num >= 300) {
                clearInterval(this.timer);
                return;
            }
            // 给滚动盒子元素赋值向左滚动距离
            this.$refs.wrapperCon.scrollLeft = left += 30;
            // 保存向左滚动距离（方便判断一次性滚动多少距离）
            num += 30;
        }, 20);
        // 20：速度（可调节）
    },
    changeTab(data) {
      this.filterData.page=1
      this.filterData.trans_status=data.id
      this.$refs.pagination.setSpecialBtn(data.id)
      this.getTableData()
      if(data.id===3||data.id===4||data.id===6){
        this.filterItemList=[
        // input输入框
        { label:this.$t('ExpressOrderManagementLang.Ticket_number'),width:200, filterKey: 'keyword', filterType: 'SearchInput', placeholderStr: null },
        // 日期选择器
        { label:this.$t('ExpressOrderManagementLang.Waybill_date'),width:200, filterKey: 'order_date', filterType: 'SearchDate' },
        // 下拉框
        { label:this.$t('ExpressOrderManagementLang.Order_payment_status'),width:200, filterKey: 'pay_status', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:this.paymentoptions,label:'name',value:'id'} },
         // 下拉框
        { label:this.$t('ExpressOrderManagementLang.Origin'),width:200, filterKey: 'start_local', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:this.localoptionsStr,label:'name_current',value:'id'} },
        // 下拉框
        { label:this.$t('ExpressOrderManagementLang.destination'),width:200, filterKey: 'target_local', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:this.localoptionsEnd,label:'name_current',value:'id'} },
      ]
      }else{
        this.filterItemList=[
        // input输入框
        { label:this.$t('ExpressOrderManagementLang.order_number'),width:200, filterKey: 'order_sn', filterType: 'SearchInput', placeholderStr: null },
        // 日期选择器
        { label:this.$t('ExpressOrderManagementLang.Order_Date'),width:200, filterKey: 'order_date', filterType: 'SearchDate' },
        // 下拉框
        { label:this.$t('ExpressOrderManagementLang.line'),width:200, filterKey: 'lid', filterType: 'SearchFilterSelect', placeholderStr: null, filterOptions: {options:this.lineoptions,label:'name_current',value:'lid'} },
        // 下拉框
        { label:this.$t('ExpressOrderManagementLang.sale'),width:200, filterKey: 'order_sale_uid', filterType: 'SearchFilterSelect', placeholderStr: null, filterOptions: {options:this.saleoptions,label:'name',value:'uid'} },
        // 下拉框
        // { label:this.$t('ExpressOrderManagementLang.Order_billing_status'),width:200, filterKey: 'out_bill_status', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:this.billingoptions,label:'name',value:'id'} },
        // 下拉框
        { label:this.$t('ExpressOrderManagementLang.Order_payment_status'),width:200, filterKey: 'pay_status', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:this.paymentoptions,label:'name',value:'id'} },
         // 下拉框
        { label:this.$t('ExpressOrderManagementLang.Origin'),width:200, filterKey: 'start_local', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:this.localoptionsStr,label:'name_current',value:'id'} },
        // 下拉框
        { label:this.$t('ExpressOrderManagementLang.destination'),width:200, filterKey: 'target_local', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:this.localoptionsEnd,label:'name_current',value:'id'} },
      ]
      }
    }
  }
}
</script>
<style lang="less">
.tableBox {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/deep/.vxe-cell{
  padding-top: 5px;
  padding-bottom: 5px;
}
.moreContant{
  display: flex;
  flex-direction: column;
  // .tooltip{
  //   display: inline-block;
  //   width: 100%;
  // }
}

.tabsBox {
  margin-bottom: 20px;
    box-sizing: border-box;
    font-size: 14px;
    color: #444;
    display: flex;
    border: 1px solid #f1f1f1;
    cursor: pointer;
    .scroll_wrapper {
        width: calc(100% - 115px);
        overflow-x: scroll;
        margin: 0 5px;
        .tabslist {
            padding: 0 10px;
            height: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            .tabsItem {
                height: 28px;
                border: 1px solid #ccc;
                box-sizing: border-box;
                border-radius: 4px;
                padding: 5px;
                display: flex;
                justify-content: center;
                align-items: center;
                white-space: nowrap; //禁止文字换行
                position: relative;
                .close-btn {
                    position: absolute;
                    top: 7px;
                    right: 5px;
                    font-size: 14px;
                }
            }
            .tabs-active {
                color: #fff;
                background-color: #6c9ee5 ;
            }
        }
    }
}

.left-btn,
.right-btn {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}
.border-left {
    border-left: 1px solid #ccc;
}
.border-right {
    border-right: 1px solid #ccc;
}
/*隐藏滚动条*/
.scroll_wrapper::-webkit-scrollbar {
    display: none;
}
.isRemarks{
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>    